<script>
import { getMkzList, updateMkz, } from "@/api/vadmin/budget/approve/approveapi";
import { Decrypt } from "@/utils/AesHmacMD5";

export default {
  name: "settingWarningValue",
  data() {
    return {
      tableData: [
        {type: '1',warningName : '常规勘探探井成本门槛值',value: '',calculationMethod: '预算/设计进尺=成本', id: 1},
        {type: '2',warningName : '非常规勘探探井成本门槛值',value: '',calculationMethod: '预算/设计进尺=成本', id: 2},
        {type: '3',warningName : '工作量预警门槛值设定',value: '',calculationMethod: '实际进尺/设计进尺 < 当前月/12', id: 3},
      ],
    }
  },
  mounted() {
    this.getMkzList()
    const style = document.createElement('style');
    style.innerHTML = `
      .el-table_1_column_3 {
        color: red !important;
      }
    `;
    document.head.appendChild(style);
  },
  methods: {
    getMkzList() {
      getMkzList(this.addDateRange({})).then(res => {
        let resData = JSON.parse(Decrypt(res.data));
          // 遍历第一个数组，找出 type 相同的元素并赋值
        this.tableData.forEach(item1 => {
          this.$set(item1,'isShowInput',false)
          const match = resData.find(item2 => item2.type === item1.type);
          console.log(match);
          if (match) {
            item1.value = match.value;
          }
        });
        console.log(this.tableData,'===>');
      })
    },
    updateValue(row) {
      row.isShowInput = true

    },
    changeDate(row) {
      console.log(row);
      row.isShowInput = false
      const params = {
        id: row.id,
        value: row.value
      }
      updateMkz(this.addDateRange(params)).then(res => {
        this.$message.success('修改成功')
        this.getMkzList()
      })
    },
  }
};
</script>

<template>
<div>
  <el-card>
    <h1>设置预警值</h1>
  </el-card>
  <el-card>
    <el-table :data="tableData" border>
      <el-table-column label="比例值名称" prop="warningName"></el-table-column>
      <el-table-column label="比例值" prop="value">
        <template slot-scope="scope">
          <span v-if="!scope.row.isShowInput">{{ scope.row.value }}</span>
          <el-input v-if="scope.row.isShowInput" @blur="changeDate(scope.row)" v-model="scope.row.value"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="默认计算方式" prop="calculationMethod"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="updateValue(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</div>
</template>

<style>
  .el-table_1_column_3 {
    color: red !important;
  }
</style>
